<template>
  <div class="server_window">
    <h3>上传数据文件至服务器</h3>
    <form action="/flaskUpload" method="POST" enctype="multipart/form-data">
      <input type="hidden" name="clientid" v-model="this.$store.state.clientId"/>
      <input type="hidden" name="account" v-model="this.$store.state.userName"/>
      <input type="hidden" name="token" v-model="this.$store.state.token"/>
      <input type="file" name="file"  />
      <input type="submit" value="上传" />
    </form>
    <p class="operate_tip">{{tip}}</p>
    <p>服务器本地的数据文件：</p>
    <form action="/flaskDel" method="post">
      <input type="hidden" name="clientid" v-model="this.$store.state.clientId"/>
      <input type="hidden" name="account" v-model="this.$store.state.userName"/>
      <input type="hidden" name="token" v-model="this.$store.state.token"/>
      <ul>
        <li v-for="file in files" :key="file.id">
          <input type="checkbox" :name="file" />{{file}} 
        </li>
        <input type="submit" value="删除所选文件"/>
      </ul>
    </form>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'ServerFile',
  data() {
    return {
      files:[],
      tip:this.$route.query.tip,
    }
  },
  methods: {
    getFileInfo(){
      const pic_require = axios.create({
        baseURL: "",
      });
      var cli_info = {
        clientid: this.$store.state.clientId,
        account: this.$store.state.userName,
        token: this.$store.state.token
      };
      pic_require({
        url: "/apiRemote",
        method:'POST',
        data: cli_info
      }).catch(function (error) {
        if (error.response) {
          console.log('文件列表请求失败',error.response.status);
        } else {
          console.log('Error', error.message);
          console.log(error.config);
        }
      }).then((res) => {
        if (!res){//未收到数据，跳出函数
          return
        }
        this.files = res['data']['files'];
        console.log(res['data'],'--data');
      });
    }
  },
  mounted() {
    this.getFileInfo();
  },
}
</script>
<style scoped>
.server_window{
  text-align: left;
  border: 3px solid orange;
  margin-left: 5px;
  min-height: 230px;
  height: auto;
}
.operate_tip{
  color: red;
}
</style>
